<template>
	<div>
		<!-- 头部 -->
		<div class="heads">
			<router-link to="/home/city" class="map">{{city}}</router-link>
			<router-link to="/home/search" >
				<van-search class="heads-sousuo" v-model="value" background="#FFFFF" placeholder="搜索商品" />
			</router-link>
			

		</div>
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="2000" indicator-color="#000000">
			<van-swipe-item v-for="item in banner" :key="item.id">
				<img :src="item.image_url" alt="" style="width: 375px; height: 200px;">
			</van-swipe-item>
		</van-swipe>
		<!-- 分类部分 -->
		
			<div class="cation-home" >
				
				<div v-for="item in channel" :key="item.id" >
					<router-link :to="`/home/TheHome? id=${item.id}`" style="color: #000000;">
					<img :src="item.icon_url" alt="">
					<p>{{item.name}}</p>
					</router-link>
				</div>
				
			</div>
		
		
		
				
			
			
		</van-grid>
		<!-- 背景小灰条 -->
		<div class="back"></div>
		<!-- 品牌制造商直供 -->
		<router-link to="/home/brand">
		<div class="brand">
			品牌制造商直供
		</div>
		</router-link>
		<!-- 品牌制造商直供图片区 -->
		<div class="box">
			<div v-for="item in brandList" :key="item.id" class="brandList">
				<div class="brandList-img">
					<img :src="item.new_pic_url" alt="" style="width:100%; height: 127px;">
					 <div class="brandList-text">
						<p>{{item.name}}</p>
						<p>{{item.floor_price}}元起</p>
					</div> 
				</div>

			</div>
		</div>
<!-- 新品首发 -->
<div class="new-pro">
	<span>新品首发</span>
	<p>查看全部</p>
</div>
<!-- 新品首发 下的横向展示图片-->
	<div class="new-pro-img">
		<div class="new-pro-content" v-for="item in newGoods" :key="item.primary_product_id">
			<img :src="item.list_pic_url" alt="">
			<p class="new-pro-content-text">{{item.name}}</p>
			<p class="new-pro-content-text2">{{item.goods_brief}}</p>
			<p class="new-pro-content-text3"> &#165 {{item.retail_price}}</p>
		</div>
		
	</div>	
	<!-- 人气推荐,好物精选 -->
	<div class="new-pro">
		<span>人气推荐,好物精选</span>
		<p>查看全部</p>
	</div>
	<!-- 人气推荐,好物精选 下的横向展示图片-->
	<div class="new-pro-img">
		<div class="new-pro-content" v-for="item in hotGoods" :key="item.id">
			<img :src="item.list_pic_url" alt="">
			<p class="new-pro-content-text">{{item.name}}</p>
			<p class="new-pro-content-text2">{{item.goods_brief}}</p>
			<p class="new-pro-content-text3"> &#165 {{item.retail_price}}</p>
		</div>
		
	</div>	
	<!-- 专题精选 -->
	<div class="project-img">
		<p class="project-text0" >专题精选</p>
		<div class="project-content" v-for="item in topicList" :key="item.id">
			
			<img :src="item.scene_pic_url" alt="">
			<p class="project-text">{{item.title}}</p>
			<p class="project-text2">{{item.subtitle}}</p>
			<p class="project-text3"> &#165 {{item.price_info}}</p>
		</div>
		
	</div>	
	
	<!-- 居家好物 下的照片 -->
	<div class="home-box">
		<div v-for="item in newCategoryList " :key="item.id">
			<div class="home">
				<p>
					{{item.name}}好物
				</p>
			</div>
			<div class="homeList">
				<div v-for="ele in item.goodsList" :key="ele.id" class="ele-content">
				<div class="home-img">
					
					<img :src="ele.list_pic_url" alt="" style="width:100%; height: 127px;">
					
					 <div class="home-text">
						<p>{{ele.name}}</p>
						<p>&#165{{ele.retail_price}}</p>
					</div> 
				</div>
			</div>
			<div class="home-cation">
				<router-link to="/home/TheHome">
			{{item.name}}好物
			<img src="../../assets/icon_go_more.png" alt="">
			</router-link>
			</div>
			</div>
		</div>
		</div>
	
	<!-- 别超过这个标签 -->
	</div>
</template>

<script>
	import index from "../../api/home/index.js"
	export default {
		data() {
			return {
				city: "",
				banner: [],
				value: '',
				brandList: [],
				newGoods:[],
				hotGoods:[],
				topicList:[],
				newCategoryList:[],
				channel:[],
				
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init(){
				var res = await index()
				this.banner = res.data.banner
				this.brandList = res.data.brandList
				this.newGoods = res.data.newGoods
				this.hotGoods = res.data.hotGoods
				this.topicList = res.data.topicList
				this.channel = res.data.channel
				// 这里不会 ↓ ↓ ↓ ↓ ↓ ↓ ↓
				this.newCategoryList = res.data.newCategoryList
				console.log(res)


			}
		},
		mounted() {
			var _this = this;
			AMap.plugin('AMap.CitySearch', function() {
				var citySearch = new AMap.CitySearch()
				citySearch.getLocalCity(function(status, result) {
					if (status === 'complete' && result.info === 'OK') {
						// 查询成功，result即为当前所在城市信息
						_this.city = result.city
					}
				})
			})


		}


	}
</script>

<style scoped lang="scss">
	@import "./scss/index.scss";

	// 头部
	.heads {
		width: 100%;
		height: 45px;
		display: flex;
.heads-sousuo{
	margin-top: -5px;	
}
		.map {
			font-size: 12px;
			color: #000000;
			margin-left: 10px;
			line-height: 45px;
		}
	}
	//分类部分
	.cation-home{
		display: flex;
		width: 100%;
		
		div{
			width: 50%;
			margin-left: 20px;
		}
	}
// <!-- 背景小灰条 -->
.back{
	width: 100%;
	height: 10px;
	background-color: #CCCCCC;
}
	// 品牌制造商直供
	.brand {
		
		width: 100%;
		text-align: center;
		font-size: 16px;
		padding: 20px 0;
		color: #000000;
	}

	//品牌制造商直供图片区
	.box {
		padding: 0 5px;
		width: 97%;
		display: flex;
		background-color: #CCCCCC;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.brandList {
			width: 49%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			.brandList-img{
				position: relative;
				.brandList-text{
					position:absolute;
					top: 20px;
					left: 5px;
				}
			}
		}
	}
	// 新品首发
	.new-pro{
		
		width: 100%;
		height: 130px;
		text-align: center;
		position: relative;
		 margin-top: 5px;
		background-color: #CCCCCC;
		span{
			margin-top: 20px;
			font-size: 16px;
			line-height: 60px;
			color: #8c9bae;
		}
		p{
			background-color: #CCCCCC;
			width: 90px;
			height: 24px;
			border: 1px #000000 solid;
			font-size: 16px;
			margin: 0 auto;
			position: absolute;
			bottom: 50px;
			left: 37%;
			color: #8c9bae;
			
		}
	}
	//<!-- 新品首发 下的横向展示图片-->
	.new-pro-img{
		overflow-x: scroll;
		display: flex;
		
		.new-pro-content{
			margin-left: 10px;
			width: 49%;
			display: flex;
			flex-direction: column;
			
			img{
				
				width: 140px;
				height: 140px;
			}
			.new-pro-content-text{
				width: 140px;
				font-size: 15px;
				color: #000000;
				overflow: hidden;
				text-overflow:ellipsis; white-space: nowrap;
				text-align: center;
			}
			.new-pro-content-text2{
				width: 140px;
				font-size: 14px;
				color: #8a8a8a;
				overflow: hidden;
				text-overflow:ellipsis; white-space: nowrap;
				text-align: center;
			}
			.new-pro-content-text3{
				color: red;
			}
		}
	}
	// 专题精选
	.project-img{
		
		overflow-x: scroll;
		display: flex;
		.project-text0{
			
		}
		.project-content{
			margin-left: 10px;
			width: 49%;
			display: flex;
			 flex-direction: column;
			margin-right: 110px;
			position: relative;
			img{
				width: 290px;
				height: 163px;
				
			}
			.project-text{
				width: 290px;
				font-size: 15px;
				color: #000000;
				overflow: hidden;
				text-overflow:ellipsis; white-space: nowrap;
				
			}
			.project-text2{
				width: 290px;
				font-size: 14px;
				color: #8a8a8a;
				overflow: hidden;
				text-overflow:ellipsis; white-space: nowrap;
				
			}
			.project-text3{
				width: 290px;
				color: red;
				position: absolute;
				top: 165px;
				left: 255px;
				
			}
		}
	}
	
	//居家好物下的照片
	.home-box {
	background-color: #CCC;
		width: 100%;
	 // display: flex;
		
		// align-items: center;
		 // justify-content: space-between;
		 // flex-wrap: wrap;
		.homeList {
			margin-top: 5px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			flex-wrap: wrap;
			.ele-content{
				background-color: #FFFFFF;
				justify-content: space-between;
				flex-wrap: wrap;
				display: flex;
				width: 49%;
				
				margin-bottom: 5px;
				.home-img{
					width: 100%;
					height: 190px;
					
					
					
					 
				}
			}
			.home-cation{
				width: 49%;
				height: 193px;
				text-align: center;
				line-height: 90px;
				font-size: 18px;
					background-color: #FFFFFF;
				position: relative;
				margin-left: 0px;	
				a{
					color: #000000;
				}
				img{
					width: 35px;
					height: 35px;
					display: block;
					position: absolute;
					left: 40%;
					
				}
			}
			}
			
		}
		// 居家好物 分类栏
		.home{
			width: 100%;
			height: 50px;
			border-bottom:5px;
			
			p{
				text-align: center;
				line-height: 50px;
				font-size: 14px;
				background-color: #F4F4F4;
			}
		}
</style>
